<template>
  <view :class="['giftbook-container', `theme-${currentTheme}`]">
    <!-- 顶部类型选择器 -->
    <view class="operation-bar">
      <view class="type-selector">
        <picker :value="currentTypeIndex" :range="typeOptions" range-key="label" @change="currentTypeIndex = $event.detail.value">
          <view class="picker-content">
            <text>{{ typeOptions[currentTypeIndex].label }}</text>
            <uni-icons type="bottom" size="14" color="#666666" />
          </view>
        </picker>
      </view>
    </view>

    <!-- 礼簿列表 -->
    <view class="giftbook-list">
      <view 
        v-for="book in filteredGiftBooks" 
        :key="book.id"
        class="giftbook-item"
        @tap="navigateToDetail(book.id)"
      >
        <view class="giftbook-content">
          <view class="header">
            <view class="title-container">
              <text class="title">{{ book.title || '未命名礼簿' }}</text>
              <text class="type-tag">{{ getTypeLabel(book.type) }}</text>
            </view>
          </view>
          <view class="amount-container">
            <view class="amount-item received">
              <text class="label">收入</text>
              <text class="value">¥{{ formatAmount(book.totalReceived || 0) }}</text>
            </view>
            <view class="amount-item given">
              <text class="label">支出</text>
              <text class="value">¥{{ formatAmount(book.totalGiven || 0) }}</text>
            </view>
          </view>
          <view class="footer">
            <text class="record-count">{{ book.records.length }}条记录</text>
          </view>
        </view>
      </view>

      <!-- 添加礼簿卡片 -->
      <view class="giftbook-item add-card" @tap="navigateToAdd">
        <view class="add-content">
          <text class="iconfont icon-add"></text>
          <text class="add-text">新建礼簿</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useGiftBookStore } from '@/store/modules/giftbook';
import { useThemeStore } from '@/store/modules/theme';
import useThemeMixin from '@/mixins/themeMixin';
import { GiftBookType } from '@/types/giftbook';

const giftBookStore = useGiftBookStore();
const themeStore = useThemeStore();

// 使用主题mixin
useThemeMixin();

// 类型选项
const typeOptions = [
  { value: 'all', label: '全部礼簿' },
  { value: GiftBookType.WEDDING, label: '婚礼礼簿' },
  { value: GiftBookType.FUNERAL, label: '白事礼簿' },
  { value: GiftBookType.BIRTHDAY, label: '生日礼簿' },
  { value: GiftBookType.GRADUATION, label: '升学礼簿' },
  { value: GiftBookType.BUSINESS, label: '商务礼簿' },
  { value: GiftBookType.HOUSEWARMING, label: '乔迁礼簿' },
  { value: GiftBookType.FULLMOON, label: '满月礼簿' },
  { value: GiftBookType.OTHER, label: '其他礼簿' }
];

const currentTypeIndex = ref(0);

// 当前选中的类型
const currentType = computed(() => typeOptions[currentTypeIndex.value].value);

// 当前主题
const currentTheme = computed(() => themeStore.currentTheme);

// 过滤后的礼簿列表
const filteredGiftBooks = computed(() => {
  const allBooks = giftBookStore.getAllGiftBooks;
  console.log('所有礼簿:', allBooks);
  
  if (currentType.value === 'all') {
    return allBooks;
  }
  const filtered = giftBookStore.getGiftBooksByType(currentType.value);
  console.log('过滤后的礼簿:', filtered);
  return filtered;
});

// 跳转到添加页面
const navigateToAdd = () => {
  uni.navigateTo({
    url: '/pages/giftbook/add'
  });
};

// 跳转到详情页面
const navigateToDetail = (id: string) => {
  uni.navigateTo({
    url: `/pages/giftbook/detail?id=${id}`
  });
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return 'NaN-NaN-NaN';
  return dateStr;
};

// 格式化金额，大数字使用简写，整数不显示小数部分
const formatAmount = (amount: number) => {
  if (amount === undefined || amount === null) return '0';
  
  // 对大金额进行简化处理
  if (amount >= 100000000) { // 亿
    const value = amount / 100000000;
    return (Number.isInteger(value) ? value.toString() : value.toFixed(2)) + '亿';
  } else if (amount >= 10000) { // 万
    const value = amount / 10000;
    return (Number.isInteger(value) ? value.toString() : value.toFixed(2)) + '万';
  }
  
  // 整数金额不显示小数点后的零
  return Number.isInteger(amount) ? amount.toString() : amount.toFixed(2);
};

// 获取类型图标
const getIconByType = (type: string) => {
  switch (type) {
    case GiftBookType.WEDDING:
      return 'wedding';
    case GiftBookType.FUNERAL:
      return 'funeral';
    case GiftBookType.BIRTHDAY:
      return 'birthday';
    case GiftBookType.GRADUATION:
      return 'graduation';
    case GiftBookType.BUSINESS:
      return 'business';
    case GiftBookType.HOUSEWARMING:
      return 'housewarming';
    case GiftBookType.FULLMOON:
      return 'fullmoon';
    case GiftBookType.OTHER:
      return 'other';
    default:
      return 'other';
  }
};

// 获取类型标签
const getTypeLabel = (type: string) => {
  switch (type) {
    case GiftBookType.WEDDING:
      return '婚礼';
    case GiftBookType.FUNERAL:
      return '白事';
    case GiftBookType.BIRTHDAY:
      return '生日';
    case GiftBookType.GRADUATION:
      return '升学';
    case GiftBookType.BUSINESS:
      return '商务';
    case GiftBookType.HOUSEWARMING:
      return '乔迁';
    case GiftBookType.FULLMOON:
      return '满月';
    case GiftBookType.OTHER:
      return '其他';
    default:
      return '其他';
  }
};

onMounted(async () => {
  console.log('组件挂载');
  await Promise.all([
    giftBookStore.loadFromStorage(),
    themeStore.initTheme()
  ]);
  console.log('数据加载完成');
  console.log('当前礼簿列表:', giftBookStore.getAllGiftBooks);
});
</script>

<style lang="scss">
.giftbook-container {
  min-height: 100vh;
  padding: 20rpx;
  transition: all 0.3s ease;
  background-color: var(--background-color);
  
  &.theme-funeral {
    --primary-color: #2c3e50;
    --primary-dark: #1a2634;
    --primary-light: #F5F5F5;
  }

  .operation-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16rpx 0;
    margin-bottom: 24rpx;
    
    .type-selector {
      flex: 1;
      
      .picker-content {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
        padding: 16rpx 32rpx;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
        
        text {
          font-size: 28rpx;
          font-weight: 500;
          color: var(--text-primary);
          margin-right: 8rpx;
        }
      }
    }
  }

  .giftbook-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;
    padding: 4rpx;

    .giftbook-item {
      position: relative;
      background-color: #FFFFFF;
      border-radius: 12rpx;
      padding: 10rpx;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      overflow: hidden;
      
      &:active {
        transform: scale(0.96);
        box-shadow: 0 2rpx 10rpx rgba(var(--button-color-rgb), 0.1);
      }

      .giftbook-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rpx;

        .header {
          margin-bottom: 8rpx;

          .title-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 4rpx;

            .title {
              font-size: 26rpx;
              font-weight: bold;
              color: var(--text-primary);
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-right: 6rpx;
            }

            .type-tag {
              font-size: 20rpx;
              color: var(--text-secondary);
              background-color: rgba(var(--button-color-rgb), 0.1);
              padding: 2rpx 8rpx;
              border-radius: 6rpx;
              white-space: nowrap;
            }
          }
        }

        .amount-container {
          display: flex;
          flex-direction: column;
          gap: 8rpx;
          padding: 4rpx 0;

          .amount-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(var(--button-color-rgb), 0.02);
            padding: 6rpx 10rpx;
            border-radius: 6rpx;
            
            .label {
              font-size: 20rpx;
              color: var(--text-secondary);
            }
            
            .value {
              font-size: 24rpx;
              font-weight: bold;
              text-align: right;
            }

            &.received {
              background-color: rgba(7, 193, 96, 0.05);
              .value {
                color: #07c160;
              }
            }

            &.given {
              background-color: rgba(255, 107, 107, 0.05);
              .value {
                color: #ff6b6b;
              }
            }
          }
        }

        .footer {
          font-size: 18rpx;
          color: var(--text-secondary);
          text-align: center;
          padding-top: 4rpx;
          border-top: 1rpx solid rgba(var(--button-color-rgb), 0.05);
        }
      }

      &.add-card {
        background-color: #FFFFFF;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;

        .add-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: var(--button-color);
          padding: 12rpx;
          border: 2rpx dashed rgba(var(--button-color-rgb), 0.2);
          border-radius: 10rpx;
          width: 100%;
          height: 100%;
          justify-content: center;
          transition: all 0.3s ease;

          .iconfont {
            font-size: 36rpx;
            margin-bottom: 6rpx;
            background: linear-gradient(135deg, var(--button-color), var(--primary-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .add-text {
            font-size: 22rpx;
            font-weight: 500;
            background: linear-gradient(135deg, var(--button-color), var(--primary-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &:active {
          .add-content {
            background: rgba(var(--button-color-rgb), 0.02);
            border-color: rgba(var(--button-color-rgb), 0.3);
          }
        }
      }
    }
  }
}
</style> 